<template>
  <div id="app">
    <div class="tabs">
<!-- 父组件向子组件传值: 父组件在子组件身上通过自定义属性传值,子组件内部通过props接收值(目的是为了渲染页面) -->
<!-- 子组件向父组件传值: 父组件提前在子组件身上绑定自定义事件,子组件内部通过$emit触发事件并传值 -->
<!-- 顶部 -->
      <top></top>
      <!-- 轮播图 -->
      <Swiper></Swiper>
      <!-- 渲染左侧分类 -->
      <Sort :arr1="arr1" :arr2="arr2" ></Sort>
      <!-- 渲染右侧列表 -->
      <TabRight :tabs="tabs" :currentIndex="currentIndex"></TabRight>
      <!-- 底部 -->
      <Tabber :currentIndex="currentIndex" :tabberList="tabberList" @deliverIndex="changelist"></Tabber>

    </div>
  </div>
</template>

<script>
//导入组件
import axios from 'axios'
import Sort from './components/Sort.vue'
import TabRight from './components/TabRight.vue'
import Top from './components/Top.vue'
import Swiper from './components/Swiper.vue'
import Tabber from './components/Tabber.vue'


export default {
    data(){
        return {
          tabs:[],
          currentIndex: 0,
          tabberList: ['首页', '订单', '我的'],
          arr1: [
            '综合排序', '距离最近', '销量最高', '筛选'
          ],
          arr2: [
            '年货节热卖', '津贴联盟', '满减优惠', '品质联盟'
          ],
        }
    },
    mounted() {
        axios.get("/api/shop/list").then((res) => {
            this.tabs = res.data.list;
          console.log(this.tabs);
        })
    },
  components: {
    Sort,
    TabRight,
    Top,
    Swiper,
    Tabber
},
  methods: {
    changelist(index) {
      this.currentIndex = index;
  }
}
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  flex-direction: column;
}
</style>
